import TabPane from "@ant-design/pro-card/lib/components/TabPane";
import ProForm, { DrawerForm, ModalForm, ProFormDatePicker, ProFormDigit, ProFormGroup, ProFormRadio, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-form"
import { PageContainer } from "@ant-design/pro-layout"
import ProTable, { EditableProTable, ProColumns } from "@ant-design/pro-table"
import { Button, Table, Upload,Tabs, Image, Descriptions, Timeline } from "antd";
import { useState } from "react";
import process from '@/assets/imgs/process.png';
import { UploadOutlined } from "@ant-design/icons";

export default () => {
  const [activeKey,setActiveKey] = useState("tab1");
  const [showDetail,setShowDetail] = useState(false);
  const [showTransfor,setShowTransfor] = useState(false);
  const [proData,setProData]  =useState<any>([{id:'1',pIndex:1},{id:'2',pIndex:2}]);
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([]);
  const [tabKey,setTabKey] = useState("1");
  const [showFollow,setShowFollow] = useState(false);
  const [fileList,setFileList] =useState<any>([]);
  const [showUser,setShowUser] = useState(false)
  const [dataList,setDataList] =useState<any>([
    { 
      'code':'CODE0001',
      'name11':'北京医院的装机线索',
      'name':'北京XXX医院',
      'name1':'李院长',
      date3:'2023-04-01',
      date4:'2023-05-01',
    },
    { 
      'code':'CODE0002',
      'name11':'南京医院的装机线索',
      'name':'南京XXX医院',
      'name1':'赵院长',
      date3:'2023-09-01',
      date4:'2023-09-06',
    },
    { 
      'code':'CODE0003',
      'name11':'上海医院的装机线索',
      'name':'上海XX医院',
      'name1':'李院长',
      date3:'2023-08-01',
      date4:'2023-08-01',
    }, { 
      'code':'CODE0001',
      'name11':'北京医院的装机线索',
      'name':'北京XXX医院',
      'name1':'李院长',
      date3:'2023-06-01',
      date4:'2023-06-01',
    }
  ]);
  const columns:ProColumns[] = [
    {
      title:'线索编号',
      dataIndex: 'code',
      ellipsis:true,
      width:150,
    },
    {
      title:'线索名称',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
    },
    {
      title:'企业名称',
      dataIndex: 'name',
      ellipsis:true,
      width:100,
    },
    {
      title:'联系人',
      dataIndex: 'name1',
      width:100,
    },
    {
      title:'下次联系时间',
      dataIndex: 'date3',
      width:100,
      hideInSearch:true,
    },
    {
      title:'最后跟进时间',
      hideInSearch:true,
      dataIndex: 'date4',
      width:100,
      // renderText:()=>'2023-04-01'
    },
    {
      title:'最后跟进人',
      dataIndex: 'date5',
      width:100,
      renderText:()=>'张三'
    },
    {
      title:'电话类型',
      dataIndex: 'name2',
      width:100,
      hideInSearch:true,
      renderText:()=>'工作电话'
    },
    {
      title:'电话号码',
      ellipsis:true,
      width:100,
      dataIndex: 'name3',
      renderText:()=>'1512345678'
    },
    {
      title:'地址',
      width:150,
      hideInSearch:true,
      ellipsis:true,
      dataIndex: 'name4',
      renderText:()=>'--'
    },
    {
      title:'关联市场活动',
      hideInSearch:true,
      width:150,
      ellipsis:true,
      dataIndex: 'name5',
      renderText:()=>'上海医疗器械国际展会'
    },
    {
      title:'标签',
      hideInSearch:true,
      dataIndex: 'name7',
      width:100,
      renderText:()=>'--'
    },
    {
      title:'线索来源',
      dataIndex: 'name8',
      width:100,
      valueType:'select',
      valueEnum:{
        '1':'展会',
        '2':'搜索引擎',
        '6':'客户介绍',
        '3':'电话咨询',
        '4':'广告',
        '5':'官网',
      },
      renderText:()=>'展会'
    },
    {
      title:'线索状态',
      dataIndex: 'name9',
      valueType:'select',
      width:100,
      valueEnum:{
        '1':'已转换',
        '2':'未转换'
      },
      renderText:()=>'已转换'
    },
    {
      title:'线索阶段',
      dataIndex: 'name10',
      valueType:'select',
      width:100,
      valueEnum:{
        '1':'发现需求',
        '2':'确认需求',
        '3':'转换客户',
        '4':'无效',
      },
      renderText:()=>'转换客户'
    },
    {
      title: "操作",
      valueType: 'option',
      fixed:'right',
      width:180,
      render: (text, record:any,_, action) => [
        <a key="b1" onClick={()=>{
          setShowTransfor(true)
        }}>机会转换</a>,<a key="b2" onClick={()=>{
          setShowUser(true)
        }}>分配</a>,<a key="b2" onClick={()=>setShowDetail(true)}>详情</a>
      ]
    }
  ]

  const aColumn:ProColumns[] = [
    {
      title:'跟进方式',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      renderText:()=>'打电话'
    },
    {
      title:'跟进内容',
      dataIndex: 'name12',
      ellipsis:true,
      renderText:()=>'线下拜访了客户'
    },
    {
      title:'跟进时间',
      dataIndex: 'name123',
      ellipsis:true,
      renderText:()=>'2023-05-10'
    },
    {
      title:'下次联系时间',
      dataIndex: 'date3',
      width:100,
      renderText:()=>'2023-05-12'
    },
  ]

  return (
    <PageContainer>
           <ProTable
      headerTitle=''
      pagination={{
        pageSizeOptions:['20', '100', '500']
      }}
      toolBarRender={() => [
        <Button
          type="primary"
          key="primary"
          onClick={() => {
            setShowDetail(true)
          }} >新建</Button>]
        }
     dataSource={dataList}
        scroll={{x:1300}}
      columns={columns}
      rowKey="id"
      search={{span:6}}
      toolbar={{
        menu: {
          type: 'tab',
          activeKey: activeKey,
          items: [
            {
              key: 'tab1',
              label: <span>全部</span>,
            },
            {
              key: 'tab2',
              label: <span>今日新增</span>,
            },
            {
              key: 'tab5',
              label: <span>本周新增</span>,
            },
            {
              key: 'tab3',
              label: <span>7天未跟进</span>,
            },
           
          ],
          onChange: (key) => {
            setActiveKey(key as string);
          },
        },
        settings: [],
      }}
      />

<DrawerForm title='详情' width={1200} visible={showDetail}  labelCol={{style:{width:120}}} labelAlign="left" layout="horizontal"  onVisibleChange={v=>{setShowDetail(v)}}  drawerProps={{
          destroyOnClose:true,
          forceRender:true
        }}>
           <Descriptions title="" column={3} size="small"  bordered>
                    <Descriptions.Item label="线索名称">江苏线索XXXX</Descriptions.Item>
                    <Descriptions.Item label="线索来源">电话咨询</Descriptions.Item>
                    <Descriptions.Item label="手机">13123456789</Descriptions.Item>
                    <Descriptions.Item label="负责人">张三</Descriptions.Item>
                    <Descriptions.Item label="创建日期">2022-07-23</Descriptions.Item>
         </Descriptions>
         <div style={{height:20}}></div>
        
            <Tabs defaultActiveKey="1" activeKey={tabKey} onTabClick={(key)=>{
                setTabKey(key)
              }}  centered style={{backgroundColor:'#fff',padding:'0 20px 20px 20px'}}>
                
                 <TabPane tab="基本信息" key="1" >
                 <div style={{height:20}}></div>
                 <ProFormGroup>
            <ProFormText name="name111" width={'md'} label="线索名称" rules={[{ required: true}]}/>
            <ProFormSelect width='md' name='4' label='区域负责人'></ProFormSelect>
              <ProFormSelect width='md' name='5' label='销售'></ProFormSelect>
            <ProFormText name="name4" width={'md'} label="地址"/>
            <ProFormText name="name1" width={'md'} label="联系人" rules={[{ required: true}]}/>
            <ProFormText name="name2" width={'md'}  label="电话类型" rules={[{ required: true}]}/>
            <ProFormText name="name3" width={'md'} label="电话号码" rules={[{ required: true}]}/>
            <ProFormText name="name4" width={'md'} label="地址"/>
            <ProFormSelect name="name5" width={'md'} label="关联市场活动" />
          </ProFormGroup>
          <ProFormGroup>
            <ProFormSelect name="name6" width={'md'} label="标签" mode='multiple' options={[{label:'标签1',value:'0'},{label:'标签2',value:'1'}]} />
            <ProFormSelect name="name7" rules={[{ required: true}]} width={'md'} label="线索来源" options={[{label:'展会',value:'0'}
            ,{label:'搜索引擎',value:'1'},{label:'电话咨询',value:'2'},{label:'广告',value:'3'},{label:'邮件咨询',value:'4'},{label:'客户介绍',value:'6'}]} />
            <ProFormSelect name="name8" width={'md'} label="线索阶段" options={[{label:'发现需求',value:'1'},{label:'确认需求',value:'2'},{label:'转换客户',value:'3'},{label:'无效',value:'4'}]} />
            <ProFormSelect name="name9" width={'md'} label="负责人" mode='multiple' options={[{label:'张三',value:'0'},{label:'李四',value:'1'}]} />
            <ProFormSelect name="name10" width={'md'} label="协同人" mode='multiple' options={[{label:'张三',value:'0'},{label:'李四',value:'1'}]} />
          </ProFormGroup>
            </TabPane>
            <TabPane tab="活动" key="2" >
                <ProTable
                              headerTitle=''
                              dataSource={[{id:'1'}]}
                              columns={aColumn}
                              rowKey='id'
                              key='sale'
                              search={false}
                              toolBarRender={() => [
                                <Button
                                  type="primary"
                                  key="primary"
                                  onClick={() => {
                                    setShowFollow(true)
                                  }} >写跟进</Button>]}
                              toolbar={{settings:[]}}
                              pagination={false}
                              />
            </TabPane>

            <TabPane tab="附件" key="4" >
                <div style={{height:20}}></div>
                <Upload fileList={fileList}   data={{'userId':sessionStorage.getItem('userId')}} >
                    <Button  icon={<UploadOutlined />}>上传附件</Button>
                  </Upload>
            </TabPane>
            <TabPane tab="操作记录" key="5" >
            <div style={{height:20}}></div>
            <Timeline mode="alternate">
              <Timeline.Item label='04-18'>张三 新建了线索</Timeline.Item>
              <Timeline.Item label='04-22' color="green">李四 跟进了线索</Timeline.Item>
            </Timeline>
            </TabPane>
          </Tabs>
           
          <ModalForm
            title="跟进"
            width={500}
            labelCol={{style:{width:120}}} labelAlign="left" layout="horizontal"
            modalProps={{
              forceRender: true,
                destroyOnClose: true,
            }}
            visible={showFollow}
            onVisibleChange={(val)=>{
              setShowFollow(val)
            }}
            onFinish={async(value)=>{
              return true;
            }}
          >
              <ProFormSelect  name="recv_consignee" label="跟进方式" options={[{label:'打电话',value:'1'},{label:'会面',value:'2'}]}   width="md"/>
              <ProFormDatePicker  name="next" label="下次联系时间"   width="md"/>
              <ProFormTextArea name='content' label='跟进内容' width={'md'}></ProFormTextArea>
          </ModalForm>
      </DrawerForm>
      <DrawerForm title='分配' width={1200} visible={showUser}  labelCol={{style:{width:120}}} labelAlign="left" layout="horizontal"  onVisibleChange={v=>{setShowUser(v)}}  drawerProps={{
          destroyOnClose:true,
          forceRender:true
        }}>
          <Descriptions title="" column={3} size="small"  bordered>
                    <Descriptions.Item label="线索名称">江苏线索XXXX</Descriptions.Item>
                    <Descriptions.Item label="线索来源">电话咨询</Descriptions.Item>
                    <Descriptions.Item label="手机">13123456789</Descriptions.Item>
                    <Descriptions.Item label="负责人">张三</Descriptions.Item>
                    <Descriptions.Item label="创建日期">2022-07-23</Descriptions.Item>
         </Descriptions>
         <div style={{height:20}}></div>
         <ProFormSelect  width={'md'} label='分配销售' name='sale' placeholder={'请选择销售'} options={[{label:'销售A',value:'1'},{label:'销售B',value:'2'},{label:'销售C',value:'3'}]}>

         </ProFormSelect>
      </DrawerForm>
      <ModalForm
        title="转换商机"
        width={1200}
        labelCol={{style:{width:120}}} labelAlign="left" layout="horizontal"
        modalProps={{
          forceRender: true,
            destroyOnClose: true,
        }}
        visible={showTransfor}
        onVisibleChange={(val)=>{
          setShowTransfor(val)
        }}
        onFinish={async(value)=>{
          return true;
        }}
      >
          <ProFormGroup>
                <ProFormText name="name11" width={'md'} label="线索编号" disabled initialValue='CODE000001' rules={[{ required: true}]}/>

                <ProFormText name="name11" width={'md'} label="商机名称" rules={[{ required: true}]}/>
                  <ProFormText name="name" width={'md'} label="客户名称" initialValue='人民医院' rules={[{ required: true}]}/>
                  <ProFormText name="name1" width={'md'} label="客户联系人" initialValue='13123456789' rules={[{ required: true}]}/>
                  <ProFormText name="name3" width={'md'} label="联系方式"  initialValue='张三' rules={[{ required: true}]}/>
                </ProFormGroup>
                <ProFormGroup>
                  <ProFormDigit name="price" width={'md'} label="商机金额" rules={[{ required: true}]}/>
                  <ProFormDatePicker name="date1" width={'md'} label="预计成交日期" rules={[{ required: true}]}/>

                  <ProFormSelect name="name5" width={'md'} label="商机阶段" options={[{label:'验证客户',value:'0'},{label:'需求确认',value:'1'},{label:'方案报价',value:'2'},{label:'招投标',value:'3'},{label:'成交',value:'4'},{label:'流失',value:'5'}]}/>

                </ProFormGroup>
                <ProFormGroup>
                  <ProFormSelect name="name9" width={'md'} label="负责人" mode='multiple' options={[{label:'张三',value:'0'},{label:'李四',value:'1'}]} />
                  <ProFormSelect name="name10" width={'md'} label="协同人" mode='multiple' options={[{label:'张三',value:'0'},{label:'李四',value:'1'}]} />
                </ProFormGroup>
      </ModalForm>
    
    </PageContainer>)
}